<template>
    <!-- 购彩 时时彩 未结订单 -->
    <!-- 遮罩 -->
    <div id="wrapper">
      <!-- 弹窗 -->
      <div id="wrap">
        <!-- title -->
        <div class="head">
            <span class="left icon">
              <i class="iconfont icongd_wanfashuoming"></i>
            </span>
            <p class="center">未结订单</p>
            <span class="right icon" @click="hide">
              <i class="iconfont iconty_guanbi"></i>
            </span>
        </div>
        <!-- content -->
        <div class="content">
            <div class="contentWrap">
                <!-- 占位框 -->
                <div class="zhanwei">
                  <div class="general-info">
                    <bill-board>
                      <div class="billboard-content">
                        <div class="item border-right">
                          <div class="title">待开奖</div>
                          <div class="quantity statistics">
                          <span>15</span>
                          <span class="extra">注</span>
                          </div>
                        </div>
                        <div class="item border-right">
                          <div class="title">购买金额</div>
                          <div class="amount statistics">
                          <span>-10</span><span class="extra">.00</span>
                          </div>
                        </div>
                        <div class="item">
                          <div class="title">最高奖金</div>
                          <div class="bonus statistics">
                            <span>+1500</span><span class="extra">.00</span>
                          </div>
                        </div>
                      </div>
                    </bill-board>
                  </div>
                </div>
                <!-- 订单列表 -->
                <order-list class="list"></order-list>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
import OrderList from './components/orderList'
import BillBoard from '@/components/base/bill-board/bill-board'
export default {
  name: 'unsettledOrders',
  components:{
    OrderList,
    BillBoard
  },
  methods: {
    hide() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
    //遮罩样式
    #wrapper
        position fixed;
        top 0;
        left 0;
        right 0;
        bottom 0;
        background-color rgba(0,0,0,.2);
        z-index 100000
        //弹窗样式
        #wrap
            position absolute;
            left 50%;
            top 50%;
            transform translate(-50%,-50%);
            width 902px;
            height 660px;
            max-height 100%;
            background-color: #faf8f8;
            // border 1px solid red;
            border-radius 3px;
            z-index 1000
            //title 样式
            .head
                width 902px;
                height 48px;
                background-color #212735;
                border-top-left-radius 3px;
                border-top-right-radius 3px;
                font-size 0;
                position absolute;
                top 0;
                left 0;

                .left
                    float left;
                    margin-top 13px;
                    margin-left 14px;
                    //占位代码 删
                    display inline-block;
                    width 18px;
                    height 20px;
                    .iconfont 
                      color #ffffff
                      font-size 24px
                .center
                    // display inline-block;
                    float left;
                    width 834px;
                    height 48px;
                    line-height 48px;
                    margin-right 3px;
                    font-size 15px;
                    color #ffffff;
                    font-weight bold;
                    text-align center;
                .right
                    float left;
                    margin-top 17px;
                    //占位代码  删
                    width 12px;
                    line-height 12px;
                    .iconfont 
                      color #e02828
                      font-size 24px
            
            //content 样式
            .content
                box-sizing border-box;
                width 100%;
                // height 610px;
                height: 100%;
                border 1px solid #dbd3d3;
                border-top 1px solid transparent;
                background-color #faf8f8;
                overflow auto;
                padding-top 48px;
                padding-right 2px;

                .contentWrap
                    box-sizing border-box
                    max-height 100%
                    height 575px;
                    width 100%;
                    // border 1px solid red;
                    // margin-top 14px;
                    // margin-left 19px;
                    padding 14px 19px 0;
                    overflow auto;
                        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
                    ::-webkit-scrollbar
                        
                        width: 4px;
                        height: 16px;
                        background-color: #F5F5F5;
                    
                    /*定义滚动条轨道 内阴影+圆角*/
                    ::-webkit-scrollbar-track
                        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                        border-radius: 10px;
                        background-color: #F5F5F5;
                    
                    /*定义滑块 内阴影+圆角*/
                    ::-webkit-scrollbar-thumb
                        border-radius: 10px;
                        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                        background-color: #555;
                    
                    //占位样式
                    .zhanwei
                      width 860px;
                      // margin 0 auto 
                      
                      .general-info >>> .bg-bar  
                        width 101%
                      .general-info 
                        width 100%
                        padding 10px 10px 8px 10px
                        box-sizing border-box
                        position relative
                        .billboard-content 
                          width 100% 
                          display flex
                          padding 15px 0
                          background #fff
                          .item 
                            width 33.33% 
                            box-sizing border-box 
                            display flex 
                            flex-direction column 
                            justify-content center
                            .title 
                              margin-bottom 10px
                              color $color-sub-grey
                            .statistics
                              display inline-block
                              span 
                                font-size 15px
                              .extra 
                                display inline-block
                                font-size 10px
                              &.amount 
                                color $color-primary-green
                              &.bonus
                                color $color-theme-red
                                .list
                                  margin-top 10px;

                    
                

</style>